---
interface Props {
	light?: boolean;
}
---

<div class="not-content">
	<div class="palette">
		{
			Astro.props.light ? (
				<div class="circle" style="--bg:var(--sl-color-accent)" />
			) : (
				<div class="circle" style="--bg:var(--sl-color-accent-high)" />
			)
		}
		<div style="--bg:var(--sl-color-black)"></div>
		<div style="--bg:var(--sl-color-white)"></div>
		<div style="--bg:var(--sl-color-gray-1)"></div>
		<div style="--bg:var(--sl-color-gray-2)"></div>
		<div style="--bg:var(--sl-color-gray-3)"></div>
		<div style="--bg:var(--sl-color-gray-4)"></div>
		<div style="--bg:var(--sl-color-gray-5)"></div>
		<div style="--bg:var(--sl-color-gray-6)"></div>
		{Astro.props.light && <div style="--bg:var(--sl-color-gray-7)" />}
	</div>
</div>

<style>
	.palette {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}
	.palette > * {
		aspect-ratio: 1;
		background-color: var(--bg);
	}

	.circle {
		border-radius: 50%;
	}
</style>
